﻿<?
include("../config/header.php");
?>
<script type='text/javascript'>
	document.title = '图片在线转换Base64 —— 在线工具';
</script>
<div class="container" id="base64-container">
	<div class="panel panel-primary">
		<div class="panel-heading"><h3 class="panel-title">图片在线转换Base64</h3></div>
	</div>
	<div class="form-group" id="base64-textarea-container">

		<label></label>
		<textarea id="base64-textarea" class="form-control" style="width:100%;height:250px;border:1px solid #c5e2f2;overflow:visible;">
 #
 # 图片在线转换为Base64，移动开发、HTML5开发、必备的DataURI工具
 # 支持 PNG、GIF、JPG、BMP、TIF、PSD、ICO 等格式
 #
</textarea>
	</div>
	<div class="form-group" align="center" id="base64-buttons-container">
		<!--<button onclick="base64_encode();" class="button button-rounded button-flat-primary">BASE64加密↓</button>
		<button onclick="base64_decode();" class="button button-rounded button-flat-action">BASE64解密↑</button>
		<button onclick="jQuery('#content').val('');" class="button button-rounded button-flat-highlight">清空</button>-->
        <span class="fl"><object id="base64-swf" width="104" height="30" type="application/x-shockwave-flash" data="http://tool.css-js.com/static/swf/base64.swf"><param name="movie" value="http://tool.css-js.com/static/swf/base64.swf" /><a href="http://www.adobe.com/go/getflash">需要安装Flash后才能使用</a></object></span>
		<span class="checkbox-inline fl checkbox selected"><input type="checkbox" checked>包含头</span>
		<span class="checkbox-inline fl checkbox"><input type="checkbox" >包含CSS</span>
        <a href="javascript:;" class="button button-rounded button-flat-action" hideFocus="true">清空</a>
        <a href="javascript:;" class="button button-rounded button-flat-highlight" hideFocus="true" style="margin-left:10px;">编码文本</a>
	</div>
	<div id="base64-imgview" style="display:none">
		<p>你选择的图片：</p>
		<img id="base64-img" />
	</div>
</div>
<script>
var __sid = 2;
$(function(){
	var textarea = $("#base64-textarea"),
	bluebtns = $("#base64-buttons-container a.blue:not(.kok)"),
	btns = $("#base64-buttons-container a.btn:not(.blue)"),
	checkboxs = $("#base64-buttons-container span.checkbox"),
	imgview = $("#base64-imgview"),
	img = $("#base64-img"),
	base64swf = $("#base64-swf").get(0);
	
	btns.eq(0).click(function(){
		textarea.val("");
	});

	bluebtns.eq(0).click(function(){
		textarea.val( base64swf.getBase64( textarea.val() ) );
	});
	
	window.__oncopy = function(){
		alert("复制成功");
		return textarea.val();
	};
	
	checkboxs.click(function(){
		var index = checkboxs.index(this);
		if(index == 0 && !checkboxs.eq(0).hasClass("selected") ){
			checkboxs.removeClass("selected");	
		}else if( index == 1 && checkboxs.eq(1).hasClass("selected") ){
			checkboxs.addClass("selected");
		}
		changeData();
	});
	
	function changeData(){
		if( base64Data == "" ){
			return;	
		}
		var data = base64Data;
		if( checkboxs.eq(0).hasClass("selected") ){
			data = "data:image/" + base64Type + ";base64," + data;
			if( checkboxs.eq(1).hasClass("selected")){
				data = "background-image: url(\"" + data + "\");"
			}
		}
		textarea.val( data );	
	}
	
	var base64Data = "", base64Type = "";
	window.__onbase64 = function(type, data){
		base64Type = type.slice(1);
		base64Data = data;
		changeData();
		img.attr("src", "data:image/" + type + ";base64," + data);
		imgview.show(1000);
	};
});
</script>

<?php
include("../config/footer.php");
?>